<!--<div id="home" class="ui-page">-->
<!--<div>-->
<div class="bannerArea" i-dom="banner">
    <div class="slider">
        {{each banner}}
        <div class="banner" style="background-image: url({{$value.pic}}?imageView2/1/w/630/h/300)" s-tap="bannerSkip({{$value.url}})">
        </div>
        {{/each}}
    </div>
</div>

{{if sec_kill.length>0||preview}}
<div class="ui-box">
    <div class="box-title ui-v-a">
        <span>限时秒杀</span>

        <div class="ui-more">
            <span>更多</span>
        </div>
    </div>
    <div class="ui-c-f">
        {{each sec_kill}}
        <div class="item">
            <div i-tap="goto(#/productDetail/{{$value._id}})">
                {{if $value.stock>0}}
                <div class="tag-timer" data-time="{{$value.time_kill}}">
                    {{if $value.time_kill<0}}
                    <span>已过期</span>
                    {{else}}
                    <span>{{$value.time_kill | formatTime:'hh:mm:ss'}}</span>
                    {{/if}}
                </div>
                {{/if}}
                {{if $value.stock==1&&$value.time_kill>0}}
                <div class="tag-last">
                    <span>最后一件</span>
                </div>
                {{/if}}
                {{if $value.stock==0}}
                <div class="tag-sellout">
                    <span>售罄</span>
                </div>
                {{/if}}

                <img src="{{$value.pic}}?imageView2/2/w/200/">

                <p class="ui-v-a"><span>{{$value.title}}</span></p>
                <span class="ui-price price-red">{{$value.price/10}}</span>
                {{if $value.price_cost}}
                <span class="ui-price price-gray">{{$value.price_cost/10}}</span>
                {{/if}}
            </div>
        </div>
        {{/each}}
    </div>
</div>
{{/if}}

{{if hot_sale.length>0||preview}}
<div class="ui-box">
    <div class="box-title ui-v-a">
        <span>本周热卖</span>

        <div class="ui-more">
            <span>更多</span>
        </div>
    </div>
    <div class="hotsaleArea">
        <div class="slider">
            {{each hot_sale}}
            <div class="hot-item" i-tap="goto(#/productDetail/{{$value._id}})">
                <img src="{{$value.pic}}?imageView2/2/w/200/">

                <p class="ui-v-a"><span>{{$value.title}}</span></p>
            </div>
            {{/each}}
        </div>
    </div>
</div>
{{/if}}

{{if machine.length>0||preview}}
<div class="ui-box">
    <div class="box-title ui-v-a">
        <span>纹身机</span>

        <div class="ui-more" i-tap="goto(#/productList/category=56fdf94abe32e20c27f57f52)">
            <span>更多</span>
        </div>
    </div>
    <div class="ui-c-f">
        {{each machine}}
        <div class="item" i-tap="goto(#/productDetail/{{$value._id}})">
            <div>
                <img src="{{$value.pic}}?imageView2/2/w/200">

                <p class="ui-v-a"><span>{{$value.title}}</span></p>
                <span class="ui-price price-red">{{$value.price/10}}</span>
            </div>
        </div>
        {{/each}}
    </div>
    {{if machine_brand.length>0}}
    <div class="brand-title"><span>热销品牌</span></div>
    <div class="brandArea">
        <div class="slider">
            {{each machine_brand}}
            <div class="brand" i-tap="goto(#/productList/brand={{$value._id}}&category=56fdf94abe32e20c27f57f52)">
                <img src="{{$value.pic}}?imageView2/2/w/200">
            </div>
            {{/each}}
        </div>

    </div>
    {{/if}}
</div>
{{/if}}

{{if pigment.length>0||preview}}
<div class="ui-box">
    <div class="box-title ui-v-a">
        <span>纹身色料</span>

        <div class="ui-more">
            <span>更多</span>
        </div>
    </div>
    <div class="ui-c-f">
        {{each pigment}}
        <div class="item">
            <div i-tap="goto(#/productList/spu={{$value._id}}&sputitle={{encodeURIComponent($value.title)}})">
                <img src="{{$value.pic}}?imageView2/2/w/200">

                <p class="ui-v-a"><span>{{$value.title}}</span></p>
                <span class="ui-price price-red">{{$value.price/10}}</span>
            </div>
        </div>
        {{/each}}
    </div>
</div>
{{/if}}

{{if category.length>0||preview}}
<div class="ui-box categoryArea">
    <div class="ui-c-f">
        {{each category}}
        <div class="item">
            <div i-tap="goto(#/productList/category={{$value._id}})">
                <img src="{{$value.pic}}?imageView2/1/w/300/h/200">
            </div>
        </div>
        {{/each}}
    </div>
</div>
{{/if}}

<div class="ui-page-holder"></div>
<!--</div>-->
<!--</div>-->


<footer class="ui-v-a ui-tri">
    <div class="ui-tab">
        <span class="fic fic-home"></span>

        <p>首页</p>
    </div>
    <a class="ui-tab" i-tap="goto(#/category)">
        <span class="fic fic-cate"></span>

        <p>分类</p>
    </a>
    <a class="ui-tab" i-tap="goto(#/myself)">
        <span class="fic fic-me"></span>

        <p>我的</p>
    </a>
</footer>

<style>
    .bannerArea {
        background-color: #f0f0f0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .slider {
        position: relative;
        white-space: nowrap;
        display: inline-block;
    }

    .banner {
        float: left;
        display: inline-block;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .box-title {
        height: 36px;
        padding: 0 8px;
        font-size: 13px;
        color: #888888;
    }

    .box-title > span {
        vertical-align: middle;
    }

    .item {
        float: left;
        width: 50%;
        margin-bottom: 8px;
    }

    .item:nth-child(even) > div {
        margin: 0 8px 0 4px;
    }

    .item:nth-child(odd) > div {
        margin: 0 4px 0 8px;
    }

    .item > div {

    }

    .item p {
        font-size: 12px;
        line-height: 1em;
        height: 2em;
    }

    .item .price-red {
        color: #ff0000;
        font-size: 12px;
        font-weight: normal;
    }

    .item .price-gray {
        color: #888888;
        text-decoration: line-through;
        font-size: 10px;
    }

    .item img {
        width: 100%;
        background: #f0f0f0;
    }

    .tag-timer::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 100%;
        background: url(img/ic_clock.png) no-repeat center;
        background-size: contain;
        margin: 0 2px;
        vertical-align: middle;
    }

    .tag-timer > span {
        vertical-align: middle;
    }

    .tag-timer, .tag-last, .tag-sellout {
        display: inline-block;
        font-size: 10px;
        height: 16px;
        padding: 0 4px 0 2px;
        position: absolute;
    }

    .tag-timer {
        color: white;
        background: rgba(0, 0, 0, 0.7);

    }

    .tag-last {
        margin-top: 16px;
        color: white;
        background: #ff0000;
    }

    .tag-sellout {
        color: white;
        background: rgba(0, 0, 0, 0.7);
    }

    .hotsaleArea {
        width: 100%;
        height: 116px;
        overflow: hidden;
    }

    .hot-item {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 4px;
        vertical-align: top;
    }

    .hot-item > img {
        width: 100%;
        height: 100%;
    }

    .hot-item > p {
        font-size: 10px;
        padding: 0.5em;
        height: 2em;
        background: rgba(255, 255, 255, 0.7);
        letter-spacing: normal;
        overflow: hidden;
        position: relative;
        line-height: 1em;
        top: -3em;
    }

    .brand-title::before {
        content: '';
        display: block;
        height: 1px;
        margin: 0 30px;
        background-color: #f0f0f0;
        position: relative;
        top: 13px;
    }

    .brand-title > span {
        color: #888888;
        display: block;
        margin: auto;
        width: 5em;
        text-align: center;
        padding: 4px;
        background: white;
        font-size: 10px;
        position: relative;
    }

    .brand {
        width: 100px;
        height: 100px;
        display: inline-block;
    }

    .brand > img {
        width: 100px;
        height: 100px;
    }

    .brandArea {
        overflow: hidden;
        white-space: nowrap;
        padding-left: 8px;
    }

    .categoryArea {
        padding-top: 8px;
    }

</style>